<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持 react操作dom-->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为 js-->
    <script src="../js/babel.min.js"></script>
    <!-- 引入prop-Types,用于对组件标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>

    <script type="text/babel">
    // 1.创建组件
        function Person(props){
            console.log(props);
            const {name,age,sex} = props
            return (
                <ul>
                    <li>姓名:{name}</li>
                    <li>性别:{sex}</li>
                    <li>年龄:{age}</li>
                </ul>
            )
        }

        // 只能这样限制
        // 对标签属性进行类型，必要性的限制
          Person.propTypes = {
            name:PropTypes.string.isRequired,  //限制name必传，且为字符串
            sex:PropTypes.string,   //限制sex为字符串
            age:PropTypes.number,   //限制age为数值
            speak:PropTypes.func,    //限制speak为函数
        }
        // 指定默认标签属性值
        Person.defaultProps={
            sex:'男',  //sex的默认值为男
            age:0    //age默认值为0
        }


        // 2.渲染组件到页面

        ReactDOM.render(<Person name="jerry" sex="女" />,document.getElementById('test'));

    </script>
</body>
</html>